import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;


// 全局自定义指令 offset, 实现加载时改变元素位置, 也可以点击按钮改变H1位置
  /**
   * el      参数 指令所绑定的元素，可以用来直接操作 DOM
   * binding 参数 一个对象 包含指令的详情信息
   * vnode   参数 Vue 编译生成的虚拟节点
   * vnode.context 相当于 this
   */
Vue.directive('offset', {
  /**
   * bind    生命周期 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
   */
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    el.style.left = binding.value.left + 'px';
    el.style.top = binding.value.top + 'px';
  },
  /**
  * update 生命周期 数据被更新时调用  数据是指 调用 offset 指令时传入的对象 obj: { top:100, left: 100}
  */
  update(el, binding, vnode) {
    el.style.left =  binding.value.left + 'px';
    el.style.top = binding.value.top + 'px';
  },

 /**
  * componentUpdated 生命周期，数据被更新后执行，update和componentUpdated区别是， 前者是更新前调用，后者更新后调用
  */
  componentUpdated() {
    console.log('数据被坑新了');
  },

  /**
   * unbind 生命周期，只调用一次，指令与元素解绑时调用。
   */
  unbind(el) {
    console.log('我被调用了，点击解绑按钮时调用的')
  }
});



// 全局指令 滚动到底部加载自定义指令 scroll
Vue.directive('scroll', {
  /**
  * inserted 生命周期 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  * vnode.context.scrollLoad 可以得到事件名称
  */
  inserted(el, binding, vnode) {
    window.addEventListener('scroll', vnode.context.scrollLoad);
  }

})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
